<template>
  <div>
      <h1>注册页</h1>

      用户名:<input type="text" v-model="username" @blur="check_username"><span>{{username_msg}}</span><br>
      密码:<input type="text" v-model="password"><br>
      邮箱:<input type="text" v-model="email"><br>
      验证码:<input type="text" v-model="code" style="width:70px"><img v-bind:src="'http://127.0.0.1:8000/image_code?uuid='+uuid" style="width:120px;height:30px" @click="update_code"><br>
      <div style="width:280px;margin:0px auto;">
      <drag-verify 
        :width="width" 
        :height="height" 
        :text="text" 
        :text-size="textSize" 
        :success-text="successText" 
        ref="verify"></drag-verify>
       </div>



      <input type="button"  value="注册" @click="reg" ref="reg">
  </div>
</template>

<script>

import {guuid} from '../utils/uuid.js'
import dragVerify from 'vue-drag-verify'

export default {
  components:{
    dragVerify
  },
  data(){
    return {
      width:250,
      height:40,
      text:"请将滑块移动到右边",
      successText:"成功了",
      textSize:"20",
      username:"",
      password:"",
      email:"",
      code:"",
      username_msg:"",
      uuid:guuid(),// 初始化uuid
    }
  },
  methods:{
    update_code(){
      this.uuid=guuid()
    },
    check_username(){
      //用户名长度验证，长度最多8位，最小2位
      //我们的正则表达式
      // const reg = /^\w{2,8}$/
      // //使用正则验证 我们的字符串
      // if(reg.test(this.username)){
      //   alert("验证通过")
      // }else{
      //   alert("校验失败")
      // }



      // 焦点从用户名输入框 离开后，获取到用户名 然后去Django端进行 用户名验证
      const data={
        "username":this.username
      }
      this.axios.post("http://127.0.0.1:8000/check",data).then(resp=>{
        console.log(resp.data.msg)
        this.username_msg=resp.data.msg
      }).catch(error=>{
        console.log(error.response.data.msg)
        this.username_msg=error.response.data.msg
      })
    },
    reg(){

      if(!this.$refs.verify.isPassing){
         alert("请不要着急，先做滑块验证，看看你是不是人")
         return 
      }
      

      console.log(this.uuid)

      //滑块验证，是否拖动到了右边


      const data={
        "username":this.username,
        "password":this.password,
        "email":this.email,
        "code":this.code,
        "uuid":this.uuid,
      }
      this.axios.post("http://127.0.0.1:8000/reg",data).then(resp=>{
        console.log(resp)
        alert(resp.data.msg)
      }).catch(error=>{
        console.log(error.response)
      })
    }
  }
}
</script>

<style>

</style>